<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
  //模拟常规异步
  // $.ajax({
  //   url: 'mock/user.json',
  //   success(data) {
  //     console.log("查询用户：", data)
  //     $.ajax({
  //       url: `mock/user_course_${data.id}.json`,
  //       success(data) {
  //         console.log('查询课程：', data)
  //         $.ajax({
  //           url: `mock/course_score_${data.id}.json`,
  //           success(data) {
  //             console.log('查询成绩：', data)
  //           },
  //           error(data) {

  //           }
  //         })
  //       },
  //       error(error) { }
  //     })
  //   },
  //   error(error) {

  //   }
  // })

  //promise封装异步操作
  // let p = new Promise((resolve, reject) => {
  //   // 异步操作
  //   $.ajax({
  //     url: 'mock/user.json',
  //     success(data) {
  //       console.log('get user ', data)
  //       resolve(data)
  //     },
  //     error(data) {
  //       reject(data)
  //     }
  //   })
  // })
  // p.then((data) => {
  //   return new Promise((resolve, reject) => {
  //     $.ajax({
  //       url: `mock/user_course_${data.id}.json`,
  //       success(data) {
  //         console.log('get user course  ', data)
  //         resolve(data)
  //       },
  //       error(data) {
  //         reject(data)
  //       }
  //     })
  //   })
  // }).then((data) => {
  //   return new Promise((resolve, reject) => {
  //     $.ajax({
  //       url: `mock/course_score_${data.id}.json`,
  //       success(data) {
  //         console.log('get user score  ', data)
  //         resolve(data)
  //       },
  //       error(data) {
  //         reject(data)
  //       }
  //     })
  //   })
  // })


  //抽取promise,封装异步请求
  function get(url, data) {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: url,
        data: data,
        success(data) {
          resolve(data)
        },
        error(data) {
          reject(data)
        }
      })
    })
  }

  get('mock/user.json')
    .then((data) => {
      console.log('get user ', data)
      return get(`mock/user_course_${data.id}.json`)
    })
    .then((data) => {
      console.log('get user course ', data)
      return get(`mock/course_score_${data.id}.json`)
    })
    .then((data) => {
      console.log('get course score ', data)
    })
    .catch(err => console.log(err))
</script>

<body>

</body>

</html>